<template>
  <!-- <div>
    登录
    <el-button type="primary">成功按钮</el-button>
  </div> -->
   <!--
      el-form
        label-position="top" 设置label的位置
        :model 用来给表单设置数据模型（对象）
        :rules 用来设置表单验证规则的
        ref 用来引用当前的表单组件

      el-form-item
        label 当前表单项的名称
         prop 它的值是 model 对象中的一个属性
          当使用 表单验证 或者 表单重置 功能时，必须要提供该属性

      el-input
        v-model 实现双向数据绑定
     -->
     <div class="login-wrapper">
       <el-row type="flex" class="loginForm" justify="center" align="middle">
        <el-col :xs="12" :sm="10" :md="8" :lg="6" :xl="4" class="login-content">
          <el-form label-position="top" :model="loginForm" :rules="rules" ref="loginForm">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="loginForm.username"></el-input>
            </el-form-item><el-form-item label="密码" prop="password">
              <el-input type="password" v-model="loginForm.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">登录</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
     </div>
</template>
<script>
// 导入axios
// import axios from 'axios'
export default{
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          // required:是否为必填项  ，message：当前校验失败时的提示，trigger：表单验证的触发时机，blur表示失去焦点时触发
          { required: true, message: '用户名为必填项', trigger: 'blur' },
          // min：最小长度，max：最大长度
          { min: 3, max: 6, message: '用户名长度在 3 到 6 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码为必填项', trigger: 'blur' },
          { min: 3, max: 6, message: '密码长度在 3 到 6 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 登录功能的实现
    login() {
      // 使用axios发送请求
      // http://localhost:8888/api/private/v1/login
      this.$http
        .post('/login', this.loginForm)
        .then(res => {
          // console.log(res)
          // const data = res.data.data
          // const meta = res.data.meta
          // es6中的解构，意思就是从res.data中取出属性data和meta
          const {data, meta} = res.data
          // console.log(data)
          if (meta.status === 200) {
            // console.log('登录成功')
            // 将登录成功的标识（token）存储到localStorage中
            localStorage.setItem('token', data.token)
            // 登录成功，需要跳转到后台管理首页
            this.$router.push('/home')
          } else {
            // console.log('登录失败', meta.msg)
            // this.$message.error(meta.msg)
            this.$message({
              type: 'error',
              message: meta.msg,
              duration: 1000
            })
          }
        })
    },
    submitForm () {
      // ref用在组件中，就表示当前组件,validate:用来表单验证的方法
      this.$refs.loginForm.validate((valid) => {
        // valid表示表单是否校验成功，如果成功就为true，如果失败就为false
        if (valid) {
          // 成功：调用登录接口
          // alert('submit!')
          // 获取到用户名和密码
          // console.log(this.loginForm)
          this.login()
        } else {
          // 失败
          return false
        }
      })
    },
    resetForm () {
      this.$refs.loginForm.resetFields()
    }
  }
}
</script>
<style>
  .login-wrapper, .loginForm{
    height: 100%;
  }
  .loginForm{
    background-color: #2d434c;
  }
  .login-content{
    min-width: 240px;
    background-color: #fff;
    padding: 20px 35px;
    border-radius: 10px
  }
</style>
